<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="primary" size="small" @click="addCustomerFn">添加经纪</el-button>
        </el-col>
        <el-col :span="20">
          <el-row type="flex">
            <el-input v-model="keyword" placeholder="请输入关键词" />
            <el-button @click="search">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="agentData"
        border
        height="350px"
        style="width: 100%"
      ><el-table-column
         label="图片"
         align="center"
         width="140px"
       >
         <template v-slot="scope">
           <img v-fixImg="require('@/assets/image/1.jpg')" :src="scope.row.image" alt="" class="avatar">
         </template>
       </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="名称"
        />
        <el-table-column
          prop="email"
          align="center"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          align="center"
          label="电话"
        />
        <el-table-column
          prop="address"
          width="100px"
          align="center"
          label="地址"
        />
        <el-table-column
          prop="desc"
          align="center"
          label="介绍"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        background
        :page-size="pageConfig._limit"
        :current-page="currentPage"
        @current-change="changeSize"
      />
    </el-card>
    <!-- 对话框 -->
    <AddAgent ref="add" :dialog-visible.sync="dialogVisible" @reloadNum="getAgentNum" @reloadPage="getAgentList" />
  </div>
</template>

<script>
import AddAgent from './component/add-agent.vue'
import { getAgentList, getAgentNum, delAgent } from '@/api/agent'
export default {
  components: {
    AddAgent
  },
  data() {
    return {
      agentData: [], // 经纪列表
      dialogVisible: false,
      agentList: [],
      total: 0,
      index: 1,
      currentPage: 1,
      keyword: '', // 关键词
      // 请求参数
      pageConfig: {
        _limit: 5,
        _start: 0,
        name_contains: ''
      }
    }
  },
  async created() {
    // // 获取经纪列表
    this.getAgentList()
    // // 获取经纪数量
    this.getAgentNum('')
  },
  methods: {
    // 渲染用户列表，start 开始的页面
    async getAgentList() {
      const res = await getAgentList(this.pageConfig)
      this.agentData = res.data
      console.log('经纪列表', this.agentData)
    },
    // 获取用户数量
    async getAgentNum(name) {
      const res = await getAgentNum({ name_contains: name })
      this.total = res.data
      console.log('total', this.total)
    },
    // 点击新增用户
    addCustomerFn() {
      this.dialogVisible = true
      this.pageConfig._start = Math.floor(this.total / this.pageConfig._limit) * this.pageConfig._limit
    },
    // 编辑功能
    async editFn(id) {
      // 获取点击的数据
      console.log(id)
      // 调用子组件的方法
      await this.$refs.add.getAgentId(id)
      this.dialogVisible = true
    },
    // 删除功能
    async delFn(id) {
    // 二次弹窗确认
      try {
        await this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        // 发送请求
        await delAgent(id)
        // 提示
        this.$message.success('删除成功')
        // 重新渲染
        this.getAgentNum('')
        if (this.agentData.length === 1) {
          this.index--
        }
        this.pageConfig._start = (this.index - 1) * this.pageConfig._limit
        this.getAgentList()
      } catch (error) {
        console.log(error)
      }
    },
    // 分页功能
    changeSize(index) {
      this.index = index
      this.pageConfig._start = (index - 1) * this.pageConfig._limit
      this.getAgentList()
    },
    // 搜索功能
    async search() {
      // 获取列表
      this.pageConfig.name_contains = this.keyword
      this.pageConfig._start = 0
      this.getAgentList()
      // 获取数量
      this.getAgentNum(this.keyword)
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding: 20px;
}
.el-table{
  margin-top: 20px;
}
.avatar{
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 0 10px;
}
  .el-pagination{
   text-align: center;
  }
</style>
